<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <script type="text/javascript">var CTP_WEB_FULLPATH = "../../"</script>
        <script type="text/javascript" src="../../js/jquery/jquery.js">
        </script>
        <script type="text/javascript" src="../../js/jquery/jquery-migrate.js">
        </script>
        <script type="text/javascript" src="../../js/jqueryui/jquery-ui.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/public/jsextend.js">
        </script>
       <script type="text/javascript" src="../../js/ctp/public/ctp.core.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/public/ctp.base.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/public/ctp.ui.component.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/panel/ctp.ui.panel.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/button/ctp.ui.button.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/groupbox/ctp.ui.groupbox.js">
		</script>
		<script type="text/javascript" src="../../js/ctp/gridlayout/ctp.ui.gridlayout.js">
        </script>	
        		<script type="text/javascript" src="../../js/ctp/label/ctp.ui.label.js">
        </script>	
        <script type="text/javascript" src="../../js/ctp/textfield/ctp.ui.textfield.js">
        </script>	
		<script type="text/javascript" src="../../js/ctp/datepicker/ctp.ui.datepicker.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/datepicker/ui.datepicker.js">
        </script>
        
		<script type="text/javascript" src="../../js/ctp/messagebox/ctp.ui.messagebox.js"></script>
        <link href="../../css/skins/standard/ctp-common.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/panel.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/button.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/groupbox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/gridlayout.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/label.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/messagebox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/textfield.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/datepicker.css" rel="stylesheet" type="text/css"/>
		
        <script>
            // ctp.core.log.lvl=ctp.core.loglvl.info;            
            $(document).ready(function(){
            	var datepicker1 = new ctp.ui.datepicker({
                    id: 'datepicker1',
                    changeMonth:true,
                    changeValue: false,
                    dateFormat: 'yy-mm-dd',
                    width:'100%',
                    changeYear:true
                });
                var datepicker2 = new ctp.ui.datepicker({
                    id: 'datepicker2',
                    changeMonth:true,
                    showTime:true,
                    width:'100%', 
                    showButtonPanel:true,
                    dateFormat:'yy/mm/dd hh:mm:ss',
                    beforeshowDay:true,
                  //  value:'2013/08/13 01:23:45',
                   // disableDay:['2013/04/05','01/01','08'],
                   // disableDateRange:[['2012/01/04','2012/02/01'],['2012/12/01','2013/01/08']],
                 //   disableWeek:[0,5],
                    changeYear:true
                });
                var datepicker3 = new ctp.ui.datepicker({
                    id: 'datepicker3',
                    changeMonth:true,
                    changeYear:true,
                    width:'100%',               
                    onlyTime:true
                });
                var datepicker4 = new ctp.ui.datepicker({
                    id: 'datepicker4',
                    changeMonth:true,
                    changeYear:true,
                    showSecond:false,
                    width:'100%',               
                    onlyTime:true
                });
                var datepicker5 = new ctp.ui.datepicker({//日期+12小时带秒时间
                    id: 'datepicker5', 
                    changeMonth:true,                   
                    changeYear:true,
                    width:'100%',               
                    showTime:true,
                    showButtonPanel:true,
                    value:'2012/01/01 12:34:56 pm',
                    dateFormat:'yy/mm/dd hh:mm:ss',
                    timeFormat:12
                });
                var datepicker6 = new ctp.ui.datepicker({//日期+12小时不带秒时间
                    id: 'datepicker6', 
                    changeMonth:true,                   
                    changeYear:true,
                    width:'100%',               
                    showTime:true,
                    showSecond:false,
                    dateFormat:'yy/mm/dd hh:mm',
                    timeFormat:12
                });
                var datepicker7 = new ctp.ui.datepicker({//仅带秒时间
                    id: 'datepicker7',
                    changeMonth:true,
                    width:'100%',               
                    value:'01:12:45 pm',
                    showButtonPanel:true,
                    onlyTime:true,
                    timeFormat:12
                });
                var datepicker8= new ctp.ui.datepicker({//仅不带秒时间
                    id: 'datepicker8',
                    changeMonth:true,
                    changeYear:true,
                    onlyTime:true,
                    width:'100%',               
                    showSecond:false,
                    timeFormat:12
                });
                var button1=new ctp.ui.button({
                    id: 'button1',
                    text: '设置不可用',
                    width: '100%',
                    onClick: function(){
                        datepicker1.setDisable(true);
                    }
                });
                var button2=new ctp.ui.button({
                    id: 'button2',
                    text: '设置可用',
                    width: '100%',
                    onClick: function(){
                        datepicker1.setDisable(false);
                    }
                });
                var button3=new ctp.ui.button({
                    id: 'button3',
                    text: '是否禁用',
                    width: '100%',
                    onClick: function(){                
						ctpMSB.alert({title:'信息提示',message:datepicker1.isDisable()});
                    }
                });
               var button4= new ctp.ui.button({
                    id: 'button4',
                    text: '设置宽度',
                    width: '100%',
                    onClick: function(){
                        datepicker1.setWidth('80px');
                    }
                });
                var button5=new ctp.ui.button({
                    id: 'button5',
                    text: '隐藏组件',
                    width: '100%',
                    onClick: function(){
                        datepicker1.setVisible(false);
                    }
                });
                var button6=new ctp.ui.button({
                    id: 'button6',
                    text: '显示组件',
                    width: '100%',
                    onClick: function(){
                        datepicker1.setVisible(true);
                    }
                });
				var button7= new ctp.ui.button({
                    id: 'button7',
                    text: '取得按钮ID',
                    width: '100%',
                    onClick: function(){						
						ctpMSB.alert({title:'信息提示',message:datepicker1.getId()});                       
                    }
                });
				var button8= new ctp.ui.button({
                    id: 'button8',
                    text: '取得按钮名称',
                    width: '100%',
                    onClick: function(){
						ctpMSB.alert({title:'信息提示',message:datepicker1.getName()});						                        
                    }
                });
				var button9= new ctp.ui.button({
                    id: 'button9',
                    text: '取得组件类型',
                    width: '100%',
                    onClick: function(){						  
						ctpMSB.alert({title:'信息提示',message:datepicker1.getCtpWebType()});                      
                    }
                });
                var button10= new ctp.ui.button({
                    id: 'button10',
                    text: '设置日历格式为yymmdd',
                    width: '100%',
                    onClick: function(){						  
						datepicker1.setDateFormat('yymmdd');                      
                    }
                });
                var button11= new ctp.ui.button({
                    id: 'button11',
                    text: '取得组件的值',
                    width: '100%',
                    onClick: function(){						  
						ctpMSB.alert({title:'信息提示',message:datepicker1.getValue()});                      
                    }
                });
                var button12= new ctp.ui.button({
                    id: 'button12',
                    text: '设置组件的值为2012-12-12',
                    width: '100%',
                    onClick: function(){						  
						datepicker1.setValue('2012-12-12');                      
                    }
                });
                var button13= new ctp.ui.button({
                    id: 'button13',
                    text: '设置为只读',
                    width: '100%',
                    onClick: function(){						  
						datepicker1.setReadOnly(true);
                    }
                });
                var button14= new ctp.ui.button({
                    id: 'button14',
                    text: '设置为不只读',
                    width: '100%',
                    onClick: function(){						  
						datepicker1.setReadOnly(false);
                    }
                });
                var button15= new ctp.ui.button({
                    id: 'button15',
                    text: '获取是否只读',
                    width: '100%',
                    onClick: function(){	
                    	ctpMSB.alert({title:'信息提示',message:datepicker1.isReadOnly()});					  
                    }
                });
                var button16= new ctp.ui.button({
                    id: 'button16',
                    text: '重置组件',
                    width: '100%',
                    onClick: function(){
                    	datepicker1.reset();
                    }
                });
                var button17= new ctp.ui.button({
                    id: 'button17',
                    text: '设置可选区域',
                    width: '100%',
                    onClick: function(){
                    	datepicker1.setMaxDate('10','2000-10-10','yy-mm-dd');
						datepicker1.setMinDate('-10','2000-10-10','yy-mm-dd');
                    }
                });
				var button18= new ctp.ui.button({
                    id: 'button18',
                    text: '设置ZINDEX',
                    width: '100%',
                    onClick: function(){
                    	datepicker1.setZIndex('300');
                    }
                });
				var button19= new ctp.ui.button({
                    id: 'button19',
                    text: '测试',
                    width: '100%',
                    onClick: function(){
                    	var test = [];
						test.push('ctpPackage: '+datepicker1.ctpPackage+'\n');
						test.push('getTemplate: '+datepicker1.getTemplate({})+'\n');
						test.push('initEvent: '+datepicker1.initEvent()+'\n');
						test.push('initSettings: '+datepicker1.initSettings+'\n');
						test.push('isContainer: '+datepicker1.isContainer+'\n');
						test.push('isHidden: '+datepicker1.isHidden+'\n');
						test.push('isNeedRender: '+datepicker1.isNeedRender+'\n');
						test.push('isNeedReset: '+datepicker1.isNeedReset+'\n');
						test.push('jqDom: '+datepicker1.jqDom+'\n');
						test.push('resize: '+datepicker1.resize()+'\n');
						test.push('settings: '+datepicker1.settings+'\n');
						test.push('type: '+datepicker1.type+'\n');
						test.push('version: '+datepicker1.version+'\n');
						test.push('rendered: '+datepicker1.rendered+'\n');
						//test.push('renderTo: '+datepicker1.renderTo()+'\n');
						//test.push('render: '+datepicker1.render()+'\n');
						//test.push('remove: '+datepicker1.remove()+'\n');
						alert(test.join(''));

						test = [];
						//test.push('afterInit: '+datepicker1.afterInit()+'\n');
						//test.push('destroy: '+datepicker1.destroy()+'\n');
						test.push('getCtpWebType: '+datepicker1.getCtpWebType()+'\n');
						test.push('getDefaultSettings: '+datepicker1.getDefaultSettings()+'\n');
						test.push('getDomId: '+datepicker1.getDomId()+'\n');
						test.push('getFieldDomId: '+datepicker1.getFieldDomId()+'\n');
						test.push('getFieldJqDom: '+datepicker1.getFieldJqDom()+'\n');
						test.push('getFnContext: '+datepicker1.getFnContext()+'\n');
						test.push('getHeight: '+datepicker1.getHeight()+'\n');
						test.push('getId: '+datepicker1.getId()+'\n');
						test.push('getInitSettings: '+datepicker1.getInitSettings()+'\n');
						test.push('getInitValue: '+datepicker1.getInitValue()+'\n');
						test.push('getJqDom: '+datepicker1.getJqDom()+'\n');
						test.push('getName: '+datepicker1.getName()+'\n');
						test.push('getPkgContext: '+datepicker1.getPkgContext()+'\n');
						test.push('getSettings: '+datepicker1.getSettings()+'\n');
						test.push('getWidth: '+datepicker1.getWidth()+'\n');
						test.push('hide: '+datepicker1.hide()+'\n');
						alert('hide')
						//test.push('init: '+datepicker1.init()+'\n');
						test.push('isDisable: '+datepicker1.isDisable()+'\n');
						test.push('isReadOnly: '+datepicker1.isReadOnly()+'\n');
						test.push('onChange: '+datepicker1.onChange(function(){alert('hello,world')},false)+'\n');
						test.push('removeJqDoms: '+datepicker1.removeJqDoms()+'\n');
						test.push('reset: '+datepicker1.reset()+'\n');
						test.push('setDisable: '+datepicker1.setDisable(true)+'\n');
						test.push('setWidth: '+datepicker1.setWidth('400px')+ ' ' + (datepicker1.getWidth()==400) +'\n');
						test.push('setHeight: '+datepicker1.setHeight('50px')+ ' ' + (datepicker1.getHeight()==50) + '\n');
						test.push('setSize: '+datepicker1.setSize('400px','100px')+ ' ' + (datepicker1.getHeight()==100 && datepicker1.getWidth()==400) + '\n');
						test.push('setReadOnly: '+datepicker1.setReadOnly(true)+ ' ' + (datepicker1.isReadOnly()==true) + '\n');
						test.push('show: '+datepicker1.show()+'\n');
						alert('show')
						alert(test.join(''));

						test = [];
						test.push('setValue: '+datepicker1.setValue('20101010')+'\n');
						test.push('getValue: '+datepicker1.getValue()+'\n');
						test.push('setDateFormat: '+datepicker1.setDateFormat('yymmdd')+'\n');
						test.push('setMinDate: '+datepicker1.setMinDate('10','20101010')+'\n');
						test.push('setMaxDate: '+datepicker1.setMaxDate('5','20101010')+'\n');
						test.push('setAltFormat: '+datepicker1.setAltFormat('yymmdd')+'\n');
						test.push('setZIndex: '+datepicker1.setZIndex(-1)+'\n');
						test.push('setInitValue: '+datepicker1.setInitValue('20101110')+'\n');
						test.push('setAltFormat: '+datepicker1.setPosition('yymmdd')+'\n');
						test.push('onChange: '+datepicker1.onChange(function(){alert('hello,world')},false)+'\n');
						test.push('onKeyDown: '+datepicker1.onKeyDown(function(){alert('hello,world1')},false)+'\n');
						test.push('onKeyUp: '+datepicker1.onKeyUp(function(){alert('hello,world1')},false)+'\n');
						test.push('unbindOnChange: '+datepicker1.unbindOnChange()+'\n');
						test.push('unbindOnKeyDown: '+datepicker1.unbindOnKeyDown()+'\n');
						test.push('unbindOnKeyUp: '+datepicker1.unbindOnKeyUp()+'\n');
						test.push('remove: '+datepicker1.remove()+'\n');
						alert(test.join(''));
                    }
                });
				var button20 =new ctp.ui.button({
                    id:'button20',
                    text:'2013-07-01不可用',
                    width: '100%',
                    onClick:function(){
                    datepicker1.setDisableDay(['2013-07-01'])
                    }
                    });
                var button21 =new ctp.ui.button({
                    id:'button21',
                    text:'2013-08-01-2013-08-06不可用',
                    width: '100%',
                    onClick:function(){
                    datepicker1.setDisableDateRange([['2013-08-01','2013-08-06']])
                    }
                    });
                var button22 =new ctp.ui.button({
                    id:'button22',
                    text:'设置周二不可用',
                    width: '100%',
                    onClick:function(){
                      datepicker1.setDisableWeek([2])
                    }
                 });
                var button23 =new ctp.ui.button({
                    id:'button23',
                    text:'取得12小时制不带秒组件的值',
                    width: '100%',
                    onClick:function(){
                	ctpMSB.alert({title:'信息提示',message:datepicker8.getValue()});	
                    }
                 });
                var showLayout = new ctp.ui.gridlayout({
					id:'showLayout',
                    width: '100%',
                    cols: 2,
                    align: 'center',
                    colSpace: 30,
                    items: [
                            [{
    	                        label:{
    	                        id:'label1',
    	                        width:'150px',
    	                        text:" 普通日期"
    	                        },
    	                        element: datepicker1
    	                      },{
    	  	                        label:{
    	  	                        id:'label2',
    	  	                        width:'150px',
    	  	                        text:"日期+时间"
    	  	                        },
    	  	                        element: datepicker2
    	  	                   }],[{
    	  	                	 label:{
    	  	                        id:'label3',
    	  	                        width:'150px',
    	  	                        text:"只显示时间"
    	  	                        },
    	  	                        element: datepicker3
    		  	                 },{
    		  	                	 label:{
    		  	                        id:'label4',
    		  	                        width:'150px',
    		  	                        text:"不显示秒"
    		  	                        },
    		  	                        element: datepicker4		  	                	
    			  	                 }], [{
    			  	                        label:{
    			  	                        id:'label5',
    			  	                        width:'150px',
    			  	                        text:"日期+12小时制带秒时间"
    			  	                        },
    			  	                        element: datepicker5
    			  	                   },{
    			  	                	 label:{
    			  	                        id:'label6',
    			  	                        width:'150px',
    			  	                        text:"日期+12小时制不带秒时间"
    			  	                        },
    			  	                        element: datepicker6
    				  	                 }],[{
    				  	                	 label:{
    				  	                        id:'label7',
    				  	                        width:'150px',
    				  	                        text:"仅12小时制时间，带秒"
    				  	                        },
    				  	                        element: datepicker7		  	                	
    					  	                 },{
    					  	                	 label:{
    					  	                        id:'label8',
    					  	                        width:'150px',
    					  	                        text:"仅12小时制时间，不带秒"
    					  	                        },
    					  	                        element: datepicker8
    						  	           }]
    					]
                });  
				var showGroupbox=new ctp.ui.groupbox({
			  	    id: 'showGroupbox',						
					items:[showLayout],
					title:'效果展示区'						   
			     });
				var buttonsLayout = new ctp.ui.gridlayout({
					id:'buttonsLayout',
                    width: '98%',
                    cols: 4,
                    align: 'center',
                    colSpace: 30,
                    items: [
					     [{element: button1},{element: button2},{element: button3},{element: button4}],
						 [{element: button5},{element: button6},{element: button7},{element: button8}],
						 [{element: button9},{element: button10},{element: button11},{element: button12}],
						 [{element: button13},{element: button14},{element: button15},{element: button16}],
						 [{element: button17},{element: button18},{element:button23},{element:button20}],
						 [{element:button21},{element:button22},{element:button23}]
					]
                
                }); 
				var buttonsGroupbox=new ctp.ui.groupbox({
			  	    id: 'buttonsGroupbox',						
					items:[buttonsLayout],
					width:'100%',
					title:'功能测试区'						   
			     });
				new ctp.ui.panel({
                    title: 'datepicker实例',
                    collapsible: true,
                    width: '800px',
                    height: 'auto',
					align:'center',
					items:[showGroupbox,buttonsGroupbox],
                    renderTo: 'body'
                });            
            });
        </script>
    </head>
    <BODY>
        <b>ctp.ui.datepicker 实例</b>
        <hr/>
        <br/>  
    </BODY>
</html>
